<template>
	<view class="content">
		<image class="shop-img" src="@/static/shop_removed.png" mode="aspectFill"></image>
		<view class="text-content">
			<view class="shop-name">光博士眼镜（大仟里店）</view>
			<view class="shop-dis">与我当前的距离2.7k m</view>
			<view class="shop-addr-container flexr align-center">
				<view class="shop-addr">
					深圳市宝安区西乡街道麻布村社区轻铁西路新湖花园C1栋1102
				</view>
				<view class="btns flexr">
					<image class="btn-img" src="@/static/call.png"></image>
					<image class="btn-img" src="@/static/navigation.png"></image>
				</view>
			</view>
			<view class="shop-time">
				营业时间：08:30-22:00
			</view>
			<view class="flexr">
				<view class="tag-item flexr align-center justify-center">
					门店休息
				</view>
				<view class="tag-item flexr align-center justify-center">
					可预约
				</view>
			</view>
		</view>
		<view class="flex-1"/>
		<view class="primary-button" @click="goAppointmentDetail">
			立即预约
		</view>
	</view>
</template>

<script setup>
import { onLoad, onShow } from '@dcloudio/uni-app'
function goAppointmentDetail() {
	uni.navigateTo({
		url: "/pages/appointment/appointmentDetail"
	})
}
</script>

<style lang="scss">
.content {
	background-color: white;
	.text-content {
		padding: 50rpx 32rpx;
	}
	.shop-img {
		height: 500rpx;
		width: 100%;
	}
	.shop-name {
		font-size: 36rpx;
		color: $text-color1;
	}
	.shop-dis {
		margin-top: 18rpx;
		font-size: 24rpx;
		color: $text-color2;
	}
	.shop-addr-container {
		margin-top: 32rpx;
	}
	.shop-addr {
		font-size: 28rpx;
		color: $text-color1;
		margin-right: 62rpx;
	}
	.btns {
		.btn-img {
			height: 72rpx;
			width: 72rpx;
		}
		.btn-img + .btn-img {
			margin-left: 32rpx;
		}
	}
	.shop-time {
		margin-top: 18rpx;
		font-size: 28rpx;
		color: $text-color1;
	}
	.tag-item {
		height: 36rpx;
		padding: 0 10rpx;
		color: $text-color4;
		background-color: $tag-bg;
		font-size: 20rpx;
		border-radius: 8rpx;
		margin-top: 18rpx;
	}
	.tag-item + .tag-item {
		margin-left: 8rpx;
	}
	.primary-button {
		margin: 0 60rpx 30rpx 60rpx;
	}
}
</style>
